<template>
  <li>
    <a 
      :href="anchor ? `#${anchor}` : path" 
      class="nav_link"
      @click.prevent="handleClick"
    >
      <strong>{{ text }}</strong>
    </a>
  </li>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router';

// 声明全局类型
declare global {
  interface Window {
    scrollToSection?: (sectionId: string) => boolean | void;
  }
}

interface Props {
  id: number;
  text: string;
  path: string;
  anchor?: string;
}

const props = defineProps<Props>();
const emit = defineEmits<{
  (e: 'navigate', anchor?: string): void;
}>();

const router = useRouter();
const route = useRoute();

// 处理点击事件
const handleClick = () => {
  // 检查当前是否在主页
  if (route.path !== '/') {
    // 如果不在主页，先导航到主页，然后滚动到对应section
    document.body.style.overflow = 'hidden'; // 恢复主页的滚动设置
    router.push('/').then(() => {
      setTimeout(() => {
        if (props.anchor && window.scrollToSection) {
          window.scrollToSection(props.anchor);
        }
      }, 100);
    });
  } else {
    // 如果已经在主页，直接触发导航
    emit('navigate', props.anchor);
  }
};
</script>

<style scoped>
/* 样式已在全局 aftech-styles.css 中定义 */
</style>